.molecule{
    @background: @color-molecule;
    @background-accent: darken(@background, 20%);

    position: relative;
    width: 80%;
    .create-text-outlined(@font-family-header);
    border-radius: 1.5em;
    font-size: 130%;
    overflow: hidden;

    @media(orientation: portrait){
        flex-wrap: wrap;
    }
    
    background-image: repeating-linear-gradient(100deg,
        @background 0%, @background 10%,
        @background-accent 10%, @background-accent 20%);

    .molecule-name{
        z-index: 1;
    }

    button{
        min-width: 10em;
    }

    .molecule-image{
        .create-background-image(12em, 0.5, 0, -50%);
    }

    .progress-bar{
        width: 20%;
        min-width: 16em;
    }
}